<template>
    <div class="change-login-password-verify-code">
        <TopTitleExit :exit="routerExit" title="Verify Code"></TopTitleExit>
        <div class="change-login-password-verify-code-container">
            <div class="hello-line">
                <!-- <div class="hello">Change Login Password Verify Code</div> -->
                <div class="text">We've emailed you a 5-digit code.</div>
            </div>
            <div class="input-box">
                <div class="input-item">
                    <div class="verify-code-box">
                        <input type="text" inputmode="decimal" v-model="verifyCode" maxlength="5" />
                        <div class="code-item">{{ verifyCode[0] }}</div>
                        <div class="code-item">{{ verifyCode[1] }}</div>
                        <div class="code-item">{{ verifyCode[2] }}</div>
                        <div class="code-item">{{ verifyCode[3] }}</div>
                        <div class="code-item">{{ verifyCode[4] }}</div>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <div class="resend-btn" @click="resend" :style="`color: ${ can_resend_email_code ? '#fff' : 'var(--text-light-color)' }; background-color: ${ can_resend_email_code ? 'var(--active-color)' : '#fff' }`">{{ can_resend_email_code ? 'Resend' : 'Resend code in ' + show_remain_time }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { routerExit, routerTo } from '@/utils/jump';
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { loading, toast } from '@/service/status';
import { sha256 } from '@/utils/crypto';

// 万能验证码的哈希值
const yanzhengmahash = '99a998ac3096f96e37ba5870db24b0d42b5b6710d6fc1957faa1e5983c70d529';

// 邮箱验证码
const verifyCode = ref('');
// 表示是否可以重新发送邮箱验证码
const can_resend_email_code = ref(false);
// 邮箱验证码发送时间
const verifyCode_send_time = ref(0);
// 显示剩余发送时间
const show_remain_time = computed(() => {
    let min = Math.floor(verifyCode_send_time.value / 60);
    let sec = Math.floor(verifyCode_send_time.value % 60);
    return `${ min < 10 ? '0' + min : min }:${ sec < 10 ? '0' + sec : sec }`;
});

// 验证邮箱验证码的函数
async function verifyEmailCode() {
    let code = verifyCode.value;
    let h = await sha256(code);
    return h == yanzhengmahash;
}

// 重新发送验证码的函数
function resend() {
    if (can_resend_email_code.value) {
        loading.value = true;
        setTimeout(() => {
            can_resend_email_code.value = true;
            verifyCode_send_time.value = 10;
            toast.success('Verification code sent successfully');
            loading.value = false;
        }, 500);
    }
}

// 监听邮箱验证码的位数
watch(verifyCode, async () => {
    if (verifyCode.value.length == 5) {
        loading.value = true;
        // 验证邮箱
        let flag = await verifyEmailCode();
        // 跳转到下一步
        setTimeout(() => {
            if (flag) {
                // 跳转到下一个页面
                toast.success('Verification code Success', 2500);
                routerTo('/user/change_login_password');
            } else {
                toast.warning('Verification code is invalid', 2500);
            }
            loading.value = false;
        }, 500);
    }
});

let inter = null;

onMounted(() => {
    can_resend_email_code.value = false;
    verifyCode_send_time.value = 10;
    toast.success('Verification code sent successfully');
    loading.value = false;
    inter = setInterval(() => {
        if (verifyCode_send_time.value > 0) {
            verifyCode_send_time.value -= 1;
            can_resend_email_code.value = false;
        } else {
            can_resend_email_code.value = true;
        }
    }, 1000);
});

onUnmounted(() => {
    clearInterval(inter);
});
</script>

<style scoped lang="less">
.change-login-password-verify-code {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .change-login-password-verify-code-container {
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        padding: 5vw;

        .hello-line {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3vw;
            margin-bottom: 10vw;

            .hello {
                font-size: 6vw;
                font-weight: 700;
            }

            .text {
                font-size: 4vw;
                font-weight: 400;
            }
        }

        .input-box {
            display: flex;
            flex-direction: column;
            gap: 3vw;
            margin: 2vw 0;

            .input-item {
                display: flex;
                flex-direction: column;
                gap: 1vw;

                .input-name {
                    font-size: 3.5vw;
                    color: var(--text-color);
                }

                .input-line {
                    box-sizing: border-box;
                    width: 100%;
                    height: 10vw;
                    display: flex;
                    align-items: center;
                    gap: 3.5vw;
                    background-color: #fff;
                    border: 0.1vw solid var(--border-color);
                    border-radius: 1.8vw;
                    padding: 3vw;

                    .icon {
                        --w: 4.5vw;
                        --h: 4.5vw;
                    }

                    input {
                        flex: 1;
                        border: none;
                        outline: none;
                        font-size: 3vw;
                    }
                }

                .input-error {
                    color: red;
                    font-size: 2.5vw;
                }

                .verify-code-box {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 2vw;
                    position: relative;

                    input {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        border: none;
                        outline: none;
                        opacity: 0;
                    }

                    .code-item {
                        --h: 15vw;
                        height: var(--h);
                        font-size: 7vw;
                        text-align: center;
                        line-height: var(--h);
                        border-bottom: 0.3vw solid var(--text-color);
                    }
                }
            }
            
            .agree-box .checkbox-line {
                display: flex;
                align-items: center;
                gap: 3vw;
                margin-bottom: 0.5vw;

                .text {
                    font-size: 3vw;

                    a {
                        font-size: 3vw;
                        text-decoration: none;
                        color: var(--active-color);
                    }
                }
            }
        }

        .bottom-box {
            display: flex;
            flex-direction: column;
            gap: 3vw;

            .btn-box {
                display: flex;
                flex-direction: column;
                gap: 3vw;
    
                .btn {
                    --h: 9vw;
                    height: var(--h);
                    font-size: 3vw;
                    line-height: var(--h);
                    border-radius: 1.5vw;
                    text-align: center;
                }
        
                .register-btn {
                    color: #fff;
                    background-color: #2563eb;
        
                    &:hover {
                        background-color: #1d4ed8;
                    }
                }
            }
    
            .link-box .text {
                margin-top: 1vw;
                text-align: center;
                font-size: 3vw;
    
                span {
                    font-size: 3vw;
                    color: var(--active-color);
                }
            }
        }

        .resend-btn {
            --h: 10vw;
            height: var(--h);
            font-size: 3.5vw;
            text-align: center;
            line-height: var(--h);
            border-radius: 2vw;
            margin-top: 10vw;
        }

        .completed-btn {
            --h: 10vw;
            height: var(--h);
            font-size: 3.5vw;
            text-align: center;
            line-height: var(--h);
            border-radius: 2vw;
            color: #fff;
            background-color: var(--active-color);
        }

        .return-btn {
            --h: 10vw;
            height: var(--h);
            margin-top: 3vw;
            font-size: 3vw;
            text-align: center;
            line-height: var(--h);
            border-radius: 2vw;
            color: var(--active-color);
            background-color: var(--active-light-color);
        }
    }
}
</style>